// 完成
<template>
  <div class="login">
    <div class="login-body">
      <i class="iconfont icon-zhuce register-icon"></i>
      <!-- 注册表单 -->
      <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm"  class="login-form">
        <el-form-item  prop="email">
          <el-input placeholder="邮箱" v-model="registerForm.email" clearable></el-input>
        </el-form-item>
        <el-form-item  prop="pass">
          <el-input placeholder="设置密码" v-model="registerForm.pass" show-password></el-input>
        </el-form-item>
        <el-form-item  prop="checkPass">
          <el-input placeholder="确认密码" v-model="registerForm.checkPass" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('registerForm')">提交</el-button>
          <el-button @click="resetForm('registerForm')">重置</el-button>
          <p>已有账号？请<span class="login-register" @click="go('/login')">登录</span></p>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.registerForm.checkPass !== '') {
          this.$refs.registerForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        email: "",
        pass:"",
        checkPass:"",

      },
      rules:{
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        pass: [
           { validator: validatePass, trigger: 'blur' },
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
        ]
      },

    };
  },
  methods: {
    go(path){
      this.$router.push(path)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 这里是注册
          this.toRegister();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 通过填写注册信息注册新账号
    async toRegister(){
      console.log("去注册");
      // console.log(this.registerForm);
      var user = this.registerForm;
      let variate = user.email
      const {data:resSel} = await this.$http.post("selectUser",{variate});
      if(resSel.status!=200){
        this.$message.error('失败');
      }else{
        // 判断该账号是否注册过，如果是，跳转到登录页面
        console.log("resSel");
        console.log(resSel);
        if(resSel.message.length!=0){
          this.$message('您已经注册过这个账号了，快去登录吧！');
          this.$router.push('/login');
        }else{
          // 该账号没有被注册过，添加数据表中
          const {data:res} = await this.$http.post("addUser",{user});
          if(res.status != 200){
            this.$message.error('注册失败');
          }else{
            this.$message({
              message: '注册成功',
              type: 'success'
            });
            this.$router.push("/login");
          }
        }

      }

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
}

}
</script>
<style scoped>
.login {
  padding: 200px 0;
}
.login-body {
  /* background-color: red; */
  width: 400px;
  margin: 10px auto;
  /* text-align: center; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.register-icon {
  /* background-color: #fff; */
  font-size: 70px;
  margin: 10px;
}
.login-form {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.login-register:hover {
  color: #409eff;
  cursor: pointer;
}
</style>
